import styled from "@emotion/styled"
import type { AriaAttributes, CSSProperties, FC, ReactNode } from "react"
import React from "react"
import { toCSSLength } from "./utils"

const classPrefix = `fli-grid`

const Container = styled.div`
    /* 容器应用 fli-grid 类时才生效 */
    &.fli-grid {
        /* 定义通用的间距变量 */
        --gap: 0;
        --gap-horizontal: var(--gap); // 横向间距
        --gap-vertical: var(--gap); // 纵向间距

        display: grid; // 启用 Grid 布局
        grid-gap: 10rem; // 默认网格间距（已被 row-gap/column-gap 覆盖）
        column-gap: var(--gap-horizontal); // 使用自定义变量控制列间距
        row-gap: var(--gap-vertical); // 使用自定义变量控制行间距

        /* 定义列数，动态控制 Grid 列结构 */
        grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

        align-items: stretch; // 所有子项在纵向拉伸铺满单元格

        /* 作用于 .fli-grid-item 类的元素 */
        &-item {
            /* 指定该元素横向跨越的列数 */
            grid-column-end: span var(--item-span);
        }
    }
`

export type NativeProps<S extends string = never> = {
    className?: string
    style?: CSSProperties & Partial<Record<S, string>>
    tabIndex?: number
} & AriaAttributes

export type GridProps = {
    columns: number
    gap?: number | string | [number | string, number | string]
    children?: ReactNode
} & NativeProps<"--gap" | "--gap-vertical" | "--gap-horizontal">

export const Grid: FC<GridProps> = (props) => {
    const style: GridProps["style"] & Record<"--columns", string> = {
        "--columns": props.columns.toString(),
    }
    const { gap } = props
    if (gap !== undefined) {
        if (Array.isArray(gap)) {
            style["--gap-horizontal"] = toCSSLength(gap[0])
            style["--gap-vertical"] = toCSSLength(gap[1])
        } else {
            style["--gap"] = toCSSLength(gap)
        }
    }

    return (
        <Container
            className={`${classPrefix}`}
            style={style}
            {...props}
        >
            {props.children}
        </Container>
    )
}

export type GridItemProps = {
    span?: number
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
    children?: ReactNode
}

type GridItemStyle = CSSProperties & Record<"--item-span", GridItemProps["span"]>

export const GridItem: FC<GridItemProps> = (p) => {
    const props = {
        ...{ span: 1 },
        ...p,
    }

    const itemStyle: GridItemStyle = {
        "--item-span": props.span,
    }
    return (
        <div
            className={`${classPrefix}-item`}
            style={itemStyle}
            onClick={props.onClick}
            {...props}
        >
            {props.children}
        </div>
    )
}
